<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
		<!-- 页面內容 -->
		<view class="grace-flex grace-flex-vcenter" style="margin-bottom: 10rpx; width:750rpx;height:128rpx;background:rgba(255,255,255,1);">
			<view class="grace-rows">
				<image :src="tubiao" style="margin-left: 25rpx; width:56rpx;height:56rpx;"></image>
				<view style="line-height: 56rpx;">
					<text style="margin-left: 28rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">{{ card_name }}</text>
					<text style="font-size:30rpx;font-weight:400;color:#A5A5A5;">（尾号{{ card_weihao }}）</text>
				</view>
				
			</view>
		</view>
		<text style="font-size: 12rpx;color: rgba(220,0,0,1);display: block;margin-left: 20rpx;">{{titis}}</text>
		<text style="font-size: 12rpx;color: rgba(220,0,0,1);display: block;margin-left: 20rpx;">{{titi}}</text>
		<view @tap="tap_tongdao(item.kaitong,item.id)" v-for="(item,index) in tongdao_list" :key="index" class="grace-flex-vcenter" style="margin-top: 3rpx; width:750rpx;height:120rpx;background:rgba(255,255,255,1);">
			<view class="grace-rows" style="margin-left: 25rpx;">
				<image src="../../static/yinlian.png" style="width: 100rpx;height: 62rpx;transform: translateY(30rpx);"></image>
				<view style="line-height: 62rpx;margin-left: 39rpx;transform: translateY(30rpx);">
					<text style="font-size:28rpx;font-weight:bold;color:rgba(51,51,51,1);">{{ item.alias }}</text>
				</view>
			</view>
			<view style="margin-left: 600rpx;transform: translateY(-15rpx);">
				<text :style="{color:item.kaitong===1?'rgba(16,182,82,1)':'rgba(220,0,0,1)'}">{{ item.kaitong===1?'已开通':'立即开通' }}</text>
			</view>
		</view>
		
		
		<!-- 鉴权 -->
		<graceDialog :isTitle="false" :show="show3" :isCloseBtn="false" width='500rpx'>
			<view class="content2" slot="content" style="text-align: center;">
				<text style="font-size: 26rpx;">验证码已发送至您</text>
				<text style="font-size: 24rpx;">尾号{{ yuliushouji }}的手机</text>
				<input v-model="yanzhengma" style="margin-top: 20rpx; height: 80rpx; border-bottom:#B2B2B2 solid 2rpx" placeholder="请输入验证码"/>
			</view>
			<view slot="btns" class="grace-space-between">
				<text class="grace-dialog-buttons" @tap="closeDialog3">关闭</text>
				<text class="grace-dialog-buttons grace-blue" @tap="confirm3">确认</text>
			</view>
		</graceDialog>
		<!-- 鉴权 -->
		</view>
	</gracePage>
</template>

<script>
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				// 鉴权
				show3 : false,
				yanzhengma:'',//验证码
				yuxuantongdao_id:'',
				yuliushouji:'',//预留手机
				order_num:'',//订单号
				types: '',
				card_id:'',
				card_name:'',
				card_weihao:'',
				tubiao:'',
				tongdao_list:[],
				titis: '',
				titi: '',
			}
		},
		onLoad:function(opt){
			this.card_id=opt.card_id;
			this.types = opt.types;
			console.log(opt.types)
			this.get_tongdao();
		},
		onShow(){
			this.get_tongdao();
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('运行Android上')
					break;
				case 'ios':
					console.log('运行iOS上')
					
						this.titis = '注意事项:'
						this.titi = '有些通道苹果手机不支持开通，请找安卓手机开通后再使用'
			
			
					break;
				default:
					console.log('运行在开发者工具上')
					break;
			}
		},
		methods:{
			tap_tongdao(kaitong,id){
				// this.jianquan_id(this.card_id,id,1);
			if(kaitong===0){
				this.jianquan_id(this.card_id,id,1);
			}else{
				this.msg_show('通道已开通');
			} 
			},
			get_tongdao(){
				var vm=this;
				vm.req.post(
				vm.lochost+'/mytrunk/repaymentplan/get_tongdao_info',
				{card_id:vm.card_id,types:vm.types},
				{},
				function(res){
					var card_info=res.data.card;
					vm.card_name=card_info.name;
					vm.card_weihao=card_info.bc_bank_number.last;
					vm.tubiao=card_info.bank.bank_icon_color;
					vm.tongdao_list=res.data.tongdao;
				}
				)
			},
			
			// 通道id鉴权
			jianquan_id(yinhangkaid,tongdaoid,type){
				if(type===1){
					var vm=this;
					vm.req.post(
					vm.lochost+'/mytrunk/mypassageway/dan_channel_authentication',
					{card:yinhangkaid,passageway_id:tongdaoid},
					{},
					function(res){
						var is_need_SMS=res.data.is_need_SMS;
						if(is_need_SMS===0){
							vm.get_tongdao();
							vm.msg_show(res.msg);
							
						}else if(is_need_SMS===1){
							vm.yuliushouji=res.data.phone;
							vm.order_num=res.data.order_num;
							vm.showDialog3()
						}else if(is_need_SMS===2){
							vm.Goto('/pages/web_view/web_view?url='+res.data.url);
						}
					}
					)
				}
				
			},
			// 显示验证码输入框
			showDialog3 : function(){
				this.show3 = true;
			},
			// 关闭输入框
			closeDialog3 : function(){
				this.show3 = false;
			},
			// 验证码输入框选择了确认
			confirm3 : function(){
				if(this.yanzhengma===''){
					this.msg_show('请输入验证码')
				}else{
					var vm=this;
					this.req.post(
					this.lochost+'/mytrunk/mypassageway/confirm_channel_authentication',
					{
						order_num:this.order_num,
						sms_code:this.yanzhengma,
					},
					{},
					function(res){
						vm.closeDialog3();
						vm.get_tongdao();
						vm.msg_show(res.msg);
						if(res.code==200){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							setTimeout(function(){
								vm.Back(1);
							},1000)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					}
					)
				}
				
			},
		},
		components:{
			gracePage,
			graceDialog
		}
	}
</script>

<style>
	.content2{padding:30rpx; line-height:50rpx;}
	.grace-dialog-buttons{width:700rpx; line-height:88rpx; height:88rpx; display:block; overflow:hidden; text-align:center; font-size:26rpx; color:#999999;}
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
